<template>
  <div ref="magnifying"
       class="relative"
       :style="`width: ${_width}; height: ${_height}`">
    <div class="scale">
      <div class="relative"
           ref="zoom"
           @dblclick="hanldePoint">
        <!-- <div class="img"
             :style="`background-image: url(${imgUrl})`"></div> -->
        <img class="img"
             :src="imgUrl">
        <div v-if="spots.length"
             class="scale_spot">
          <div v-for="(spot, i) in spots"
               :key="`spot${i}`"
               :style="`left: ${spot.left}px; top: ${spot.top}px`">
            <img class="spot"
                 :src="spot.iconUrl || pointIcon "
                 alt="定点定位"
                 :title="spot.title"
                 @click="onClickPoint(i)" />
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import Scale from '../../utils/Scale'
const pointIcon = require('../../assets/ball.png')

export default {
  name: 'Magnifying',

  props: {
    imgUrl: {
      type: String,
      required: true,
    },
    width: {
      type: Number | String,
      default: '100%',
    },
    height: {
      type: Number | String,
      default: '100%',
    },
    spots: {
      type: Array,
      default: () => [],
      // {
      //   left: number;
      //   top: number;
      //   iconUrl: string;
      //   title: string;
      // }
    },
    isNeedPoint: {
      type: Boolean,
      required: false,
    },
    scaleOption: {
      type: Object,
      default: () => ({
        // isMousewheel: true,
        // maxScale: 10,
        // minScale: 0.5
      }),
    },
  },
  computed: {
    _width() {
      if (typeof this.width === 'number') {
        return this.width + 'px'
      } else if (typeof this.width === 'string') {
        return this.width
      } else {
        return '100%'
      }
    },
    _height() {
      if (typeof this.height === 'number') {
        return this.height + 'px'
      } else if (typeof this.height === 'string') {
        return this.height
      } else {
        return '100%'
      }
    },
  },

  data() {
    return {
      scale: null,
      pointIcon,
    }
  },
  mounted() {
    this.scale = new Scale({
      el: this.$refs.zoom,
      width: this.$refs.magnifying.offsetWidth,
      height: this.$refs.magnifying.offsetHeight,
      ...this.scaleOption,
    })
    this.scale.init()
  },

  methods: {
    handleZoom(type, scale = 0.2) {
      this.scale[type](scale)
    },
    handleRotate() {
      this.scale.rotate()
    },
    handleRest() {
      this.scale.reset()
    },
    hanldePoint(e) {
      if (!this.isNeedPoint) return
      const position = {
        left: e.offsetX,
        top: e.offsetY,
      }
      this.$emit('dblclick-point', position)
    },
    onClickPoint(index) {
      this.$emit('click-point', this.spots[index])
    },
  },

  destroyed() {
    this.scale && this.scale.stop()
  },
}
</script>

<style scoped>
.relative {
  position: relative;
  width: 100%;
  height: 100%;
}
.scale {
  width: 100%;
  height: 100%;
  border: 1px solid;
}

.scale_spot {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
}

.scale_spot > div {
  position: absolute;
  transform: translate(-50%, -80%);
}

.scale .img {
  width: 100%;
}
</style>
